<template>
    <div>
      <h1 class="title">用户名登录</h1>
      <el-form-item label="用户名" prop="username">
        <el-input class="input" type="text" v-model="loginFrom.username" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input class="input" type="password" v-model="loginFrom.password" autocomplete="off"></el-input>
  
      </el-form-item>
      <el-form-item label="验证码" prop="captcha">
        <el-input maxlength="5" v-model.number="loginFrom.captcha" type="text"
          @keydown.native.enter="submitForm('loginFrom')" class="captcha" ref="captcha"></el-input>
        <span class="captcha-svg" v-loading="loading">
          <i v-html="captcha" @click="getCaptcha" class="cap"></i>
        </span>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('loginFrom')" class="login">登 录</el-button>
      </el-form-item>
      <!-- 手机登入图标按钮 -->
      <el-form-item>
        <div class="sms">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-iphone"></use>
          </svg>
          <a href="javascript:;" @click="$emit('changeSmsType')" style="color: #fff; font-size: 16px">切换短信登录</a>
        </div>
      </el-form-item>
    </div>
  </template>
  <script>
  import * as api from "@/api/users";
  
  //表单验证的实现思路，当前组件的loginFrom变化，同步到父组件LoginFrom就行
  export default {
    mounted() {
      // api.getCaptchaApi()
      //    .then(res=>{
      //      console.log(res)
      //    })
    },
    created() {
      this.getCaptcha();
    },
  
    // props:['loginFrom']
    data() {
      return {
        isSmsLogin: true, //控制是否切换短信登录
        captcha: "", //验证码
        loading: false,
        loginFrom: {
          username: "",
          password: "",
          captcha: "",
        },
      };
    },
    //通过watch监听LoginFrom的变化
    watch: {
      loginFrom: {
        handler(newVal) {
          // console.log(newVal)
          this.$emit("synLoginFrom", newVal);
        },
        deep: true,
      },
    },
    methods: {
      submitForm(formName) {
        // console.log(formName);
        // console.log(this.$refs)
        this.$emit("submits");
      },
      //封装一个获取验证码的方法
      getCaptcha() {
        // 打开加载动画
        this.loading = true
        api.getCaptchaApi().then(res=> {
          this.captcha = res.data.img;
          this.loading =false
        });
      },
    },
  };
  </script>
  <style lang="less" scoped>
  /* //修改element-ui的样式
          //1.打开调试器，找准类名，覆盖样式
          //2.看权重，使用!important
          //3.使用深度选择器>>>  /deep/  */
  //密码的
  .input {
    width: 250px;
    height: 44px;
  
    /deep/ .el-input__inner {
      height: 44px;
    }
  }
  
  .el-button--primary {
  width: 250px;
  height: 40px;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  font-weight: 500;
  color: #000;
  background-color: #fff;
  border: none;
  border-radius: 45px;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease 0s;
  cursor: pointer;
  outline: none;
}

.el-button--primary:hover {
  background-image: linear-gradient(30deg, #10f69a, #cef4e4);
  box-shadow: 0px 15px 30px rgba(74, 235, 171, 0.7);
  color: rgb(0, 0, 0);
  transform: translateY(-7px);
  

}

.el-button--primary:active {
  transform: translateY(-1px);
}
  /deep/.el-form-item__label {
    color: #fff;
  }
  
  .icon {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-left: 50px;
  }
  
  //验证码的
  .captcha {
    width: 125px;
    height: 44px;
    border: 0;
  
    /deep/.el-input__inner {
      border-radius: 0;
      border-right: none;
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
      height: 44px;
      border: 0;
      //
    }
  }
  
  .captcha-svg {
  
    display: inline-block;
    width: 125px;
    height: 44px;
    color: #888;
    background-color: #fff;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    vertical-align: middle;
    margin-bottom: 1.3px;
    overflow: hidden;
  
    /deep/ .cap {
      display: flex;
      position: absolute;
      width: 125px;
      height: 44px;
  
    }
  
  }
  
  .title {
    font-size: 20px;
    text-align: center;
    margin-bottom: 30px;
    color: #fff;
    font-weight: 100;
  }
  </style>
  